響應式網頁的基礎涵養與使用 Bootstrap 了解隔線

2023 iThome 鐵人賽

DAY 9

Modern Web

給前端新手的圖文故事系列第 9 篇

15th鐵人賽

iffyart

團隊狗狗與睡袋的產地

2023-09-24 17:40:40

617 瀏覽

分享至

RWD(Responsive Webside Design) 與 AWD(Adaptive Webside Design) 基本介紹與運作原理解析

響應式網頁設計概念(RWD & AWD)

在現代的網頁開發中，響應式網頁設計(Responsive Web Design)已經成為了必不可少的一環，而其中的核心需求其實很單純，就是希望網頁能在各個顯示尺寸中，都能提供使用者良好的閱讀體驗。

而如今主流的做法，是會藉由負責頁面顯示的 CSS 對頁面尺寸(如：電腦：1280px、平板：768px等)進行偵測，並給予不同的參數屬性已達成響應式設計，不過也有另外一派的做法叫自應式網頁設計(Adaptive Web Design)，他們是藉由 JavaScript 動態偵測頁面尺寸之後，直接給予使用者不同的網站，以利達成個別尺寸的最佳化尺寸。

實務上在響應式網頁設計上，AWD 的使用頻率非常低，因為他所帶來的維護成本非常的高，因此推薦若無特殊需求，盡可能以 RWD 的方式進行設計開發。

SPA 網頁設計概念

在傳統的網頁設計中，我們更換頁面時會替換 HTML 頁面，這邊可以把網頁想像成一本書，而每翻一頁的行為就是替換一個 HTML Page，另外網頁的操作通常會希望具有統一的風格設計，如導覽列、頁首、頁尾等區塊會盡可能符合整體的設計指南(UI Guide)，而不同的網頁也會因需求呈現不同的結構，以求達到其所追求的目的與呈現。

更換頁面的設計其實在實務上並沒有太大的缺點，但那是在小規模的專案上，實際上當每個頁面都分別獨立時，便會導致個別頁面需要單獨維護，雖然內容頁本該如此，但當要修改的是導覽列上的 LOGO 時，這將會是一個艱鉅挑戰，實際上就像是有一本書上每一頁都寫著書本名稱，而寫書的人要去修改這個名稱一樣，或許在十幾頁內都還是可容許範圍，但當頁面上百上千時，人工就不是個好選擇了。

如本範例右邊的 Aside 均不作變更

SPA(single-page application)的中文是單頁式網頁應用，他的運作原理很單純，就是當我們在切換頁面時，他並不會切換整個 HTML PAGE，而是藉由負責動態操作的 JavaScript，來將想要變更的內容動態替換掉，這樣做的好處是我們不用再為了翻頁的行為而發愁，可以更有規範的進行頁面的管理，但同時想當然而頁面的複雜度就會直接拉升，最直觀的就是我們需要開始撰寫 JavaScript 來應對複雜的流程，也就是需要撰寫更多的程式碼才能實現操作。

SPA 雖然有他的複雜度，但他帶來的便利性確實無庸置疑，如 Google、Meta 等等大廠的應用，目前也多以 SPA 為主要開發選擇。

簡易響應式網站技術設計練習與開發工具使用

學習使用 @media 方式簡單操作響應式網頁

學習 @media 尺寸選擇與操作規則

CSS 表達語法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

簡易版範例

以下範例將在裝置尺寸最大為 600px 之前(小於 600px)，將 body 變更為亮藍色背景，若大於 600px 則會變更回黃色

body {
  background-color: yellow;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

撰寫不同尺寸樣式以利完成區隔

// RWD size
$XL-media: 1760px;
$L-media: 1340px;
$M-media: 966px;
$S-media: 556px;

// 1760px> Display
@media all and (min-width: 1760px) {
	/*   放置需要變更的樣式   */
}

// 1760px~1340px Display
@media all and (max-width: 1760px) and (min-width: 1340px) {
	/*   放置需要變更的樣式   */
}

// 1340px~966px Display */
@media all and (max-width: 1340px) and (min-width: 966px) {
	/*   放置需要變更的樣式   */
}

// 966px~556px Display
@media all and (max-width: 966px) and (min-width: 556px) {
	/*   放置需要變更的樣式   */
}

// 966px~0 Display
@media all and (max-width: 966px) {
	/*   放置需要變更的樣式   */
}

// 556px~0 Display
@media all and (max-width: 556px) {
	/*   放置需要變更的樣式   */
}

解析 Bootstrap 等架構運作方式與原理

解析十二網格的設計佈局

在設計中，我們時常會用到各種的網格或佈局系統以利我們參考，從黃金比例到基準線對起等，概念上就像是我們有著一把專門為設計所誕生的一把尺，而這般好用的概念，理所因當的也在設計給被轉換為網頁時，被良好的保留了下來，而且經過了長年累月的操作與優化，他也成為了我們網頁上必不可少的一環。

隔線的好處很明確，它賦予了網頁一個相對標準化的指標，以往我們在計算寬度大小時所需的思考，也在這個機制下土崩瓦解。

但話說回來，其實我們在設計上並不常採用全部的空間，原因是在網頁觀看的時候，過長的文章寬度很容易導致使用者的閱讀困難，並且在現今螢幕逐漸變大的影響之下，我們也很難真正的去推測出大多的螢幕尺寸，因此在下方的畫板當中，我們會藉由一個包裝(Conatiner)的方式，將內容的網格進行一定程度的包裝處理，以利於網站都能夠正常的至中顯示，並保持我們所預計的每個寬度。

另外有一點需要注意的是，當我們在使用平板或手機裝置時，十二格的佈局很明顯太過於擁擠，因此當我們的 RWD 在切換畫面尺寸時，我們也可以適當調整網格在設計稿上的數量，以利達到一個良好的設計佈局。

以下的圖是我們的實務範例，其實可以發現說在標準結構的樣板當中，我們的當行(ROW)項目數量，都在隨著畫面寬度的變更逐漸減少，那是因為當畫面縮小時，原先所想展示的 UI 可能已經脫離了她最佳的顯示寬度，因此為了更良好的畫面呈現，我們需要在設計 UI 時多多的思考與規劃。

但在實務的開發當中，12 等分網格的佈局並不會減少，但各位同學所需記憶的是，他的概念其實是「幾分之幾」，也就是説如上圖平板端的顯示，一個物件佔用「八分之四」的網格，也就是 50% 的寬度，因此在程式沒有異動的情況下，該尺寸就需要變成「十二分之六」，這樣才能讓我們的撰寫統一進行。

解析 Bootstrap 等架構運作方式

在我們以前的範例當中，有許多的程式其實在其他專案也可以重複地利用，但換句話來說，當你並不是從過去的專案複製程式過來時，可能就會導致有「已撰寫過的程式」需要重新撰寫，而這顯然是沒有除了基礎練習以外的意義，因此我們在開發上，會習慣使用過往的內容去堆砌新的 UI，但問題是當每個專案需求都不同時，我們很難進行涵蓋大部分需求的設計，而同時在不熟悉的基礎上，哪些程式該做保留或刪除，也成了一個令人頭大的問題。

而 Bootstrap 這類型函式庫的出現，就在一定程度上幫我們解決了這個問題，在概念上，他其實也跟我們上方的專案一樣，在樣式已經撰寫好並可以使用的情況下，我們使需要知道正確的 HTML 撰寫方式，就可以將網頁製作出來，而這其實也是他誕生的一個緣由，他提供了大量以撰寫完成的樣式供妳使用，讓你可以在不撰寫任何樣式的情況下，也能輕鬆自在的撰寫響應式網頁。

Bootstrap 官方連結
 Bootstrap 台灣六角學院中文翻譯

學習如何應用這類型的 Libraries 所提供的樣式與功能

開始使用

可透過下載檔案或 CDN 的方式將 Library 引入專案：

下載

選擇 Compiled CSS and JS 下載，會取得已經編譯過的檔案，只要將需要的使用<script>和<link>外部匯入即可。

CDN

將樣式<link>放在檔案<head>中。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

除了樣式之外，還有相關的 JS 檔案。

<!-- Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

完整範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>
  <body>
    內容放置區

    <!-- JavaScript Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>


    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-lg-6 col-xxl-4 mb-4">
          <div class="card">
            <img src="img/dog.jpeg" class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-sm-12 col-lg-6 col-xxl-4">
          <div class="card">
            <img src="img/dog.jpeg" class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-sm-12 col-lg-6 col-xxl-4">
          <div class="card">
            <img src="img/dog.jpeg" class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>

學習從瀏覽器所提供的開發者模式中，查看未知樣式的來源以及作用域範圍

Bootstrap 非常方便，要製作一個導覽列只需要將文件上面的 sample code 貼到專案裡就可以快速產生。

但如果想要修改部分樣式該怎麼辦？CSS 有個後面覆蓋前面的特性，只要將自訂樣式於 Bootstrap 內建樣式之後匯入，就可以成功修改屬性。

下面範例將文件中<nav>的 code 複製到專案中，將 Navbar 的標題文字改為紅色。

Step1：透過檢視(F12) 尋找控制 Navber 文字顏色的屬性名稱：
右側 Style 看見是.navbar-light .navbar-brand在控制文字顏色。

Step2：重新定義該屬性的屬性值：
新增一個main.css用來撰寫自訂的樣式，並於 Bootstrap.css 之後匯入。

/* main.css */
.navbar-light .navbar-brand { color: red; }

重新整理網頁，可以看到main.css的樣式覆蓋了原先 Bootstrap 的顏色設定。

樣式的優先順序!important是最高的。如果遇到 Bootstrap 預設 CSS 有該設定，除了檔案匯入順序之外還需要額外加上!important才能提升優先順序

學習使用 Bootstrap 中所提供的文件，為自己的網頁引入一些 JavaScript 的功能

    <main class="container">
      <ul class="row">
        <li class="col-sm-12 col-lg-6 col-xxl-4 mb-4">
          <article class="card">
            <img src="img/dog.jpeg" class="card-img-top" alt="..." />
            <main class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </main>
          </article>
        </li>
        <li class="col-sm-12 col-lg-6 col-xxl-4 mb-4">
          <article class="card">
            <img src="img/dog.jpeg" class="card-img-top" alt="..." />
            <main class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </main>
          </article>
        </li>
        <li class="col-sm-12 col-lg-6 col-xxl-4 mb-4">
          <article class="card">
            <img src="img/dog.jpeg" class="card-img-top" alt="..." />
            <main class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </main>
          </article>
        </li>
      </ul>
    </main>